<template>

    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="产品类型">
                <el-select v-model="searchForm.productTypeId" filterable placeholder="请选择产品类型">
                    <el-option v-for="item in deviceTypeDic" :key="item.index"
                    :label="item.productTypeCode"
                    :value="item.productTypeId">
                    </el-option>
                </el-select> 
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="产品序列号">
                <el-input v-model="searchForm.productSn" placeholder="产品序列号" clearable></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="4">
                <div class="flex items-center justify-end">
                <el-button type="primary" @click="getData(1)">搜索</el-button>
                <el-button @click="resetSearchForm">重置</el-button>
                </div>
            </el-col>
            </el-row>
        </el-form>

        <!-- 表格数据 -->
        <el-table :data="tableData" stripe style="width: 100%" height="460" 
            v-loading="tableDataLoading" :border="true"
            highlight-current-row ref="multipleTableRef" 
            @selection-change="handleSelectionChange"
            :row-key="row => row.productId">

            <el-table-column type="selection" width="55" :reserve-selection="true" />

            <el-table-column label="生产厂家" align="center">
                <template #default="{ row }">
                    {{ row.factory }}
                </template>
            </el-table-column>

            <el-table-column label="产品型号" align="center">
                <template #default="{ row }">
                    {{ row.productTypeCode }}
                </template>
            </el-table-column>

            <el-table-column label="产品序列号" align="center">
                <template #default="{ row }">
                    {{ row.productSn }}
                </template>
            </el-table-column>

            
            <el-table-column label="整机序列号" align="center">
                <template #default="{ row }">
                    {{ row.oeSerialNo }}
                </template>
            </el-table-column>

            <el-table-column label="产品状态" align="center">
                <template #default="{ row }">
                    {{ transferProductStatus(row.productStatus) }}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>

</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getProductTypeList,getProductList} from "~/api/productApi"

// 列表数据
const tableData = ref([])
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const tableDataLoading = ref(false)
const multipleTableRef = ref()

//设备类型字典数据
const deviceTypeDic = ref([])

// 选择的数据
const selectCheckList = ref([])

// 查询条件
const searchForm = reactive({
    productTypeId: null,
    productSn: "",
    page: currentPage.value,
    size: limit.value,
})

const transferProductStatus = (status) => {
  switch (status) {
    case 0:
      return '保内';
    case 1:
      return '保外';
    default:
      return status;
  }
};

//当选择项发生变化时会触发该事件
function handleSelectionChange(val) {
    //console.log("handleSelectionChange===>",JSON.stringify(val))
    selectCheckList.value = val
    getCheckedDevice()
}

// 生命周期
onMounted(async () => {

    //初始化设备类型
    await initDeviceType()

    //初始化列表数据
    getData()
})

//初始化设备类型
async function initDeviceType() {
    //查询全部
    let paramIo = {
        page: 1,
        size: 100,
    }
    getProductTypeList(paramIo)
    .then(res => {
    if (res) {
        deviceTypeDic.value = res.records
    }}).finally(() => {
        tableDataLoading.value = false
    })
}

//获取列表数据
async function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }
    tableDataLoading.value = true
    searchForm.page = currentPage.value
    getProductList(searchForm)
    .then(res => {
        if (res) {
            tableData.value = res.records
            total.value = res.total
        } else {
            tableData.value = []
            total.value = 0
        }
    })
    .finally(() => {
        tableDataLoading.value = false
    })
}

// 重置搜索框
const resetSearchForm = () => {
    searchForm.productTypeId = null
    searchForm.productSn = ""
    getData(1)
}

// 对外暴露方法
const emit = defineEmits([
    'getCheckedDevice',
])

const getCheckedDevice = () => {
    const selectData = selectCheckList
    let returnParams = selectData.value
    emit("getCheckedDevice", returnParams)
}
</script>
